<template>
  <WcjHeader></WcjHeader>
  <div class="html">
    <img src="../../assets/images/static-union_164793255107785e.png " alt="" />
    <div class="degnlu">
      <div>
        <input type="text" placeholder="请输入账号" v-model="phone" />
        <span class="iconfont icon-cuowu3" @click="removeList"></span>
      </div>
      <div>
        <input ref="ipt" type="password" placeholder="请输入密码" v-model="password" />
        <span class="iconfont icon-cuowu3" @click="removeList1"></span>
        <span :class="displays?'iconfont icon-xianshi':'iconfont icon-yincang'"  @click="display"></span>
      </div>
    </div>
    <div class="password">
      <a href="">遇到问题?</a>
      <a href="">忘记密码</a>
    </div>
    <div class="shouji">
      <button @click="degnlu">登录</button>
    </div>
    <div class="youxiang">
      <button @click="tiaozhuan">注册</button>
    </div>
    <div class="icon">
      <div>
        <i class="iconfont icon-weixin">微信</i>
        <span>|</span>
      </div>
      <div>
        <i class="iconfont icon-QQ">QQ</i>
        <span>|</span>
      </div>
      <div>
        <i class="iconfont icon-xinlangweibo">微博</i>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {getLoginStore} from '../../stores/login'
import { ref,onMounted,watch } from "vue";
import { useRouter,useRoute } from "vue-router";
import { ElMessage } from "element-plus";
let LoginStore = getLoginStore()
let route = useRoute()
let phone = ref<any>("");
let password = ref<any>("");
let redirect = ref<any>('')
let displays = ref<any>(false)
let ipt = ref()
const router = useRouter();
watch(
  () => route,
  () => {
    console.log(route);
    
    redirect.value = route.query && (route.query.redirect as string);
  },
  { immediate: true, deep: true }
);
const tiaozhuan = () => {
  router.push("/register");
};
const degnlu = async()=>{  
   let result:any =  await LoginStore.degnlu1({phone:phone.value,password:password.value})
    if(result == 200){
      ElMessage({
          type: "success",
          message: "登录成功",
        });
        router.push({ path: redirect.value || "/home" });
    }
 
}
const removeList = ()=>{
  phone.value = ''
}
const removeList1 = ()=>{
  password.value = ''
}
const display = ()=>{
  displays.value =  !displays.value
  if(displays.value){
    ipt.value.type = 'text'
  }else{
    ipt.value.type = 'password'
  }
}
</script>

<style scoped>
.html {
  width: 375px;
  height: 543px;
  padding-top: 80px;
  background: #f2f5f4;
}
.html img {
  display: block;
  width: 134px;
  height: 45px;
  margin: 0px auto;
}
.html .shouji button,
.html .youxiang button {
  width: 335px;
  margin-left: 16px;
  margin-bottom: 15px;
  height: 47px;
  background: red;
  color: white;
  font-size: 14px;
  border: none;
  border-radius: 5px;
}
.html .shouji {
  margin-top: 30px;
}
.html .youxiang button {
  color: red;
  background: #f2f5f4;
  border: 1px solid red;
}
.degnlu {
  padding: 0;
  margin-left: 15px;
}
.degnlu div {
  width: 335px;
  height: 37px;
  margin-top: 35px;
  padding: 0;
  border-bottom: 1px solid #d6d6d6;
}
.degnlu div input {
  padding-left: 5px;
  font-size: 15px;
  border: none;
  background: none;
}
.degnlu .iconfont {
  float: right;
  margin-right: 15px;
  line-height: 37px;
}
.degnlu .ipt {
  float: right;
  margin-right: 15px;
  background: none;
  border-radius: 5px;
  border: 1px solid #bfbfbf;
  width: 82px;
  height: 27px;
  font-size: 14px;
}
.password {
  display: flex;
  padding: 0px 20px;
  margin-top: 20px;
  justify-content: space-between;
  font-size: 14px;
  font-weight: "Microsoft YaHei", "微软雅黑";
}
.icon{
  display: flex;
  margin-top: 85px;
  justify-content: center;
  color: #7F7F7F;
}
.icon span{
  font-size: 18px;
  margin: 0px 10px;
}

</style>
